<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>OA系统 - 首页</title>
    <link rel="stylesheet" href="css/mobile.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="phone-container">
        <div class="phone-screen">
            <div class="notch"></div>
            <div class="app-container">
                <!-- 顶部状态栏 -->
                <div class="status-bar">
                    <span>9:41</span>
                    <span>OA系统</span>
                    <div>
                        <i class="fas fa-signal"></i>
                        <i class="fas fa-wifi"></i>
                        <i class="fas fa-battery-full"></i>
                    </div>
                </div>
                
                <!-- 内容区域 -->
                <div class="content">
                    <!-- 首页头部 -->
                    <div class="home-header">
                        <div class="user-info">
                            <div class="avatar">张</div>
                            <div class="user-details">
                                <h2>张三</h2>
                                <p>产品经理 · 技术部</p>
                            </div>
                        </div>
                        
                        <div class="stats-grid">
                            <div class="stat-item">
                                <div class="stat-value">12</div>
                                <div class="stat-label">待办任务</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-value">5</div>
                                <div class="stat-label">今日会议</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-value">3</div>
                                <div class="stat-label">待审批</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 快捷操作 -->
                    <div class="quick-actions">
                        <div class="section-title">快捷操作</div>
                        <div class="action-grid">
                            <div class="action-item" onclick="showToast('考勤打卡')">
                                <div class="action-icon" style="background: #07c160;">
                                    <i class="fas fa-clock"></i>
                                </div>
                                <div class="action-label">考勤打卡</div>
                            </div>
                            <div class="action-item" onclick="showToast('请假申请')">
                                <div class="action-icon" style="background: #ff9800;">
                                    <i class="fas fa-calendar-alt"></i>
                                </div>
                                <div class="action-label">请假申请</div>
                            </div>
                            <div class="action-item" onclick="showToast('报销申请')">
                                <div class="action-icon" style="background: #2196f3;">
                                    <i class="fas fa-receipt"></i>
                                </div>
                                <div class="action-label">报销申请</div>
                            </div>
                            <div class="action-item" onclick="showToast('工作报告')">
                                <div class="action-icon" style="background: #9c27b0;">
                                    <i class="fas fa-file-alt"></i>
                                </div>
                                <div class="action-label">工作报告</div>
                            </div>
                            <div class="action-item" onclick="showToast('客户管理')">
                                <div class="action-icon" style="background: #f44336;">
                                    <i class="fas fa-users"></i>
                                </div>
                                <div class="action-label">客户管理</div>
                            </div>
                            <div class="action-item" onclick="showToast('项目管理')">
                                <div class="action-icon" style="background: #00bcd4;">
                                    <i class="fas fa-project-diagram"></i>
                                </div>
                                <div class="action-label">项目管理</div>
                            </div>
                            <div class="action-item" onclick="showToast('任务分配')">
                                <div class="action-icon" style="background: #8bc34a;">
                                    <i class="fas fa-tasks"></i>
                                </div>
                                <div class="action-label">任务分配</div>
                            </div>
                            <div class="action-item" onclick="showToast('更多功能')">
                                <div class="action-icon" style="background: #607d8b;">
                                    <i class="fas fa-ellipsis-h"></i>
                                </div>
                                <div class="action-label">更多功能</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 今日待办 -->
                    <div class="quick-actions">
                        <div class="section-title">今日待办</div>
                        <div class="card">
                            <div style="display: flex; align-items: center; margin-bottom: 10px;">
                                <div style="width: 8px; height: 8px; background: #ff5722; border-radius: 50%; margin-right: 10px;"></div>
                                <div style="flex: 1;">
                                    <div style="font-weight: bold; margin-bottom: 3px;">产品评审会议</div>
                                    <div style="font-size: 12px; color: #999;">10:00 - 11:00 · 会议室A</div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div style="display: flex; align-items: center; margin-bottom: 10px;">
                                <div style="width: 8px; height: 8px; background: #2196f3; border-radius: 50%; margin-right: 10px;"></div>
                                <div style="flex: 1;">
                                    <div style="font-weight: bold; margin-bottom: 3px;">完成Q4产品规划文档</div>
                                    <div style="font-size: 12px; color: #999;">截止今天 18:00</div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div style="display: flex; align-items: center; margin-bottom: 10px;">
                                <div style="width: 8px; height: 8px; background: #ff9800; border-radius: 50%; margin-right: 10px;"></div>
                                <div style="flex: 1;">
                                    <div style="font-weight: bold; margin-bottom: 3px;">客户需求评审</div>
                                    <div style="font-size: 12px; color: #999;">14:00 - 15:30 · 线上会议</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 底部导航栏 -->
                <div class="tab-bar">
                    <div class="tab-item active">
                        <div class="tab-icon" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"%2307c160\"><path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\"/></svg>');"></div>
                        <div>首页</div>
                    </div>
                    <div class="tab-item" onclick="window.location.href='workbench.html'">
                        <div class="tab-icon" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"%23999\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>');"></div>
                        <div>工作台</div>
                    </div>
                    <div class="tab-item" onclick="window.location.href='profile.html'">
                        <div class="tab-icon" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"%23999\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"/></svg>');"></div>
                        <div>我的</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/mobile.js"></script>
    <script>
        // 模拟时间更新
        function updateTime() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const timeElement = document.querySelector('.status-bar span');
            if (timeElement) {
                timeElement.textContent = `${hours}:${minutes}`;
            }
        }
        
        updateTime();
        setInterval(updateTime, 60000); // 每分钟更新一次时间
    </script>
</body>
</html>